<template lang="html">
  <div class="note-editor {{curNote.title != undefined}}">
    <!--输入框-->
    <div class="editor-box" v-if="curNote.title != undefined || curNote.content != undefined">
      <!--head-->
      <div class="head">
        <input type="text" id="title" v-if="isEditor" @blur="titleBlur" @focus="titleFocus" class="title" placeholder="请输入标题" v-model="curNote.title">
        <div class="title" v-else v-text="curNote.title"></div>
        <div class="btn-box">
          <a v-if="isEditor" @click="editState(false)">预览</a>
          <a @click="updateNote" v-if="isEditor">保存</a>
          <a @click="del">删除</a>
          <a @click="edit" v-if="!isEditor">编辑</a>
          <a @click="select = !select">移动</a>
          <a @click="toggleV(!maxEditor)">全屏</a>
        </div>
        <!--class-->
        <div class="show-select" transition='add' v-show="select">
          <span @click="move(data._id)" v-for="data in classList" v-if="data != curClass" v-text="data.name"></span>
        </div>
      </div>
      <!--输入框-->
      <div class="content-box" v-if="isEditor">
        <textarea id="textarea" placeholder="请输入的内容" @keyup="keyup($event)" v-model="curNote.content"></textarea>
      </div>
      <div class="preview" v-else v-html="curNote.content"></div>
    </div>
    <!--提示-->
    <div class="msg-box" v-else>
      <h4>记事本</h4>
    </div>
  </div>
</template>
<script type="text/javascript">
  import $ from '../assets/lib/jquery-3.0.0.min';
  import { setCurNote , editState , showMsg , toggleV , delNote} from '../vuex/actions.js'
  export default{
    data(){
      return {
        title:'',
        select:false,
        class:[],
      }
    },
    vuex:{
      getters:{
        isEditor:(state) => state.isEditor,
        curClass:(state) => state.curClass,
        classList:(state) => state.classList,
        curNote:(state) => state.curNote,
        maxEditor:(state) => state.maxEditor,
        curIndex:(state) => state.curIndex,
      },
      actions:{
        setCurNote,
        editState,
        showMsg,
        toggleV,
        delNote,
      }
    },
    methods:{
      updateNote(){
        const self = this;
        let data = {
          title:self.curNote.title,
          content:self.curNote.content,
          classId:self.curNote.classId,
          id:self.curNote._id,
        };
        $.post('http://localhost:8888/add-note' , data , (res) => {
          if(res.state == 'ok'){
            self.curNote.brief = res.data.brief;
            self.curNote.pubdate = res.data.pubdate;
            self.showMsg('保存成功');
          }else{
            self.showMsg(res.message);
          };
        },'JSON');
      },
      //删除
      del(data){
        const self = this;
        data = {
          id:self.curNote._id
        };
        $.post('http://localhost:8888/del-note' , data , (res) => {
          if(res.state === 'ok'){
            self.delNote(self.curIndex);
            self.setCurNote(self.curIndex);
            self.showMsg('删除成功');
          }else{
            self.showMsg('删除失败');
          };
        });
      },
      //ctrl+s保存
      keyup(e){
        if(e.ctrlKey  === true && e.keyCode === 83){
          this.updateNote();
        };
      },
      toggleMax(){
        this.toggleV()
        this.maxEditor = !this.maxEditor;
      },
      edit(){
        this.editState(true);
        setTimeout(() => {
          document.querySelector("#textarea").focus();
        })
      },
      //获取光标
      titleFocus(){
        //保存原始标题
        this.title = this.curNote.title;
      },
      //鼠标一开验证
      titleBlur(){
        if(!this.curNote.title.replace(/(^\s*)|(\s*$)/g, "")){
          this.curNote.title = this.title;
        };
      },
      //移动分类
      move(classId){
        let self = this;
        let data = {
          id:self.curNote._id,
          classId:classId,
        };
        $.post('http://localhost:8888/note-move' , data , (res) => {
            if(res.state == 'ok'){
              self.delNote(self.curIndex);
              self.setCurNote(self.curIndex);
              self.select = false;
            };
            self.showMsg(res.message);
        } , 'JSON');
      }
    },
    ready(){
      //阻止Ctrl+s保存网页
      document.addEventListener('keydown' , (e) => {
        if(e.ctrlKey  == true && e.keyCode == 83){
          e = e || window.event;
          e.preventDefault(this.defaultName);
        };
      });
    }
  }
</script>
<style media="screen" scoped>
  /*预览*/
  .preview-box,
  .msg-box{
    width:100%;
    height:100%;
  }
  .msg-box{
    display:-webkit-box;
    display:box;
    -webkit-box-pack:center;
    -moz-box-pack:center;
    -webkit-box-align:center;
    -moz-box-align:center;
  }
  /*default*/
  .msg-box > h4{
    text-align:center;
    width:100%;
    font-size:40px;
    font-weight:normal;
    color:#eee;
  }
  .preview-box > .preview{
    padding:20px;
    box-sizing:border-box;
  }
  .note-editor{
    width:100%;
    height:100%;
    -moz-box-flex:1.0;
    -webkit-box-flex:1.0;
    box-flex:1.0;
    position:relative;
  }
  .head{
    width:100%;
    height:55px;
    padding:10px;
    box-sizing:border-box;
    display:-webkit-box;
    display:-moz-box;
    display:box;
    box-orient:horizontal;
    -webkit-box-orient:horizontal;
    -moz-box-orient:horizontal;
    border-bottom:1px solid #ddd;
    position:relative;
  }
  .head > input,
  .head > .title{
    height:100%;
    display:block;
    border:none;
    font-size:16px;
    line-height:35px;
    -webkit-box-flex:1.0;
    box-flex:1.0;
    color:#555;
  }
  .head > input:disabled{
    background:none;
  }
  .head > .btn-box{
    height:32px;
    font-size:0;
    border:1px solid #ddd;
    border-radius:4px;
    overflow:hidden;
    margin-left:8px;
  }
  .btn-box > a{
    height:100%;
    display:inline-block;
    cursor:pointer;
    font-size:12px;
    line-height:32px;
    padding:0 12px;
    margin-right:-1px;
    border-right:1px solid #ddd;
  }
  /*输入框*/
  .editor-box .content-box,
  .editor-box .preview{
    width:100%;
    position:absolute;
    top:55px;
    bottom:0;
  }
  .content-box > textarea,
  .editor-box .preview{
    width:100%;
    border:none;
    box-sizing:border-box;
    padding:10px;
    font-size:14px;
    line-height:1.65;
    resize:none;
  }
  .content-box > textarea{
    height:100%;
  }
  /*分类*/
  .show-select{
    top:53px;
    right:18px;
  }
  .show-select > span{
    height:35px;
    line-height:35px;
  }
</style>
